<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="修改密码"
  />

  <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-descriptions title="绑定的邮箱" style="margin-left: 200px">
      <a-descriptions-item label="您绑定的邮箱">
        {{ Email + "XXXXXXX" + EmailCom }}
      </a-descriptions-item>
    </a-descriptions>
    <a-form-item
      label="新密码"
      has-feedback
      :validate-status="type1"
      :help="message1"
    >
      <a-input-password
        v-model:value="user.new_pwd"
        @change="checkPwd"
        placeholder="请输入新密码"
      />
    </a-form-item>

    <a-form-item
      label="确认新密码"
      has-feedback
      :validate-status="type2"
      :help="message2"
    >
      <a-input-password
        v-model:value="user.user_pwd2"
        @change="checkPwd2"
        placeholder="请重复新密码"
      />
    </a-form-item>

    <a-form-item
      label="验证码"
      has-feedback
      :validate-status="type3"
      :help="message3"
    >
      <a-input
        v-model:value="user.userCode"
        @change="checkCode"
        placeholder="请输入6位验证码"
      />
    </a-form-item>
  </a-form>

  <a-button
    style="margin-left: 400px"
    id="mailButton"
    :disabled="buttonStatus1"
    @click="
      sendmail();
      f();
    "
    >点击发送验证码</a-button
  >
  <a-button
    :disabled="buttonStatus2"
    style="margin-left: 230px"
    @click="updatePwd"
    >完成修改</a-button
  >
</template>


<script setup>
//////////////////////////////////
import { reactive, ref } from "vue";
import { post, setLocalToken, removeLocalToken } from "@/common";
import { useRouter } from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
////////////////////////////////////////////
const user = reactive({
  new_pwd: "",
  user_pwd2: "",
  email: "",
  userCode: "",
});

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 14,
};

const type1 = ref("");
const message1 = ref("");

const type2 = ref("");
const message2 = ref("");

const type3 = ref("");
const message3 = ref("");

const buttonStatus2 = ref(true);
const buttonStatus1 = ref(true);

const router = useRouter();

const Email = ref("");
const EmailCom = ref("");

var wait = 60;
////////////////////////////////////////////////
const f = () => {
  time(document.getElementById("mailButton"));
};

const time = (obj) => {
  if (wait === 0) {
    obj.removeAttribute("disabled");
    obj.innerHTML = "获取验证码";
    wait = 60;
  } else {
    obj.setAttribute("disabled", true);
    obj.innerHTML = wait + "秒后重新发送";
    wait--;
    setTimeout(function () {
      time(obj);
    }, 1000);
  }
};

const checkPwd = () => {
  if (user.new_pwd.length >= 6) {
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "密码不少于6位";
  }
};

const checkPwd2 = () => {
  if (user.new_pwd == user.user_pwd2) {
    type2.value = "success";
    message2.value = "";
    buttonStatus1.value = false;
  } else {
    type2.value = "error";
    message2.value = "两次密码不相同";
  }
};

const getUserInfo = () => {
  get("/security/updatePassword/getEmail").then((res) => {
    user.email = res.data.list[0].email;
    Email.value =
      res.data.list[0].email[0] +
      res.data.list[0].email[1] +
      res.data.list[0].email[2] +
      res.data.list[0].email[3];
    const index = res.data.list[0].email.indexOf("@");
    const leng = res.data.list[0].email.length;
    var i = index;
    for (i; i < leng; i++) {
      EmailCom.value = EmailCom.value + res.data.list[0].email[i];
    }
  });
};

getUserInfo();

const checkCode = () => {
  if (user.userCode.length == 6) {
    type3.value = "success";
    message3.value = "";
    buttonStatus2.value = false;
  } else {
    type3.value = "error";
    message3.value = "请输入长度正确的验证码";
    buttonStatus2.value = true;
  }
};

const sendmail = () => {
  post("/security/EmailConfirm/SendMail", user).then((res) => {
    if (res.success) {
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  });
};

const updatePwd = () => {
  if (type1.value == "success") {
    if (type2.value == "success") {
      post("/security/updatePassword", user).then((res) => {
        if (res.success) {
          message.success(res.message);
          removeLocalToken();
          router.push({ path: "/" });
        } else {
          message.error(res.message);
        }
      });
    } else {
      message.error(message2.value)
    }
  } else {
    message.error(message1.value)
  }
};
</script>

<style>
</style>